<template>
  <div>
    <!--顶部输入框-->
    <div class="top">
<<<<<<< HEAD

      <van-search v-model="value" placeholder="请输入搜索关键词" @click="tiaoSearch" />
      <!--内容-->
      <div class="content">
        <!--楼层左-->
        <ul class="left">
          <li v-for="(item, index) in left" :key="item.id" :class="activeIndex == index ? 'active' : ''"
            @click="changeIndex(index)">
            {{ item.name }}
          </li>
        </ul>
        <!--楼层右-->
        <ul class="right" ref="rightBox" @scroll="rightScroll">
          <li v-for="i in left" :key="i.id">
            <h3>{{ i.name }}</h3>
            <ul>
              <li v-for="item in right.filter((v: any) => i.id == v.pid)" :key="item.id" @click="tiao(item)">
                <van-card :price="item.price" :desc="item.title" :title="item.title" :thumb="item.img">
                  <template #footer>
                    <van-button icon="plus" size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)"></van-button>
                  </template>
                </van-card>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
=======
      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="tiaoSearch" />
    <!--内容-->
    <div class="content">
      <!--楼层左-->
      <ul class="left">
        <li v-for="(item, index) in left" :key="item.id" :class="activeIndex == index ? 'active' : ''"
          @click="changeIndex(index)">
          {{ item.name }}
        </li>
      </ul>
      <!--楼层右-->

      <ul class="right" ref="rightBox" @scroll="rightScroll">

      <!-- <ul class="right"> -->

        <li v-for="i in left" :key="i.id">
          <h3>{{ i.name }}</h3>
          <ul>
            <li v-for="item in right.filter((v: any) => i.id == v.pid)" :key="item.id" @click="tiao(item)">
              <van-card :price="item.price" :desc="item.title" :title="item.title" :thumb="item.img">
                <template #footer>
                  <van-button icon="plus" size="mini" color="linear-gradient(to right, #ff6034, #ee0a24)"></van-button>
                </template>
              </van-card>
            </li>
          </ul>
        </li>
      </ul>
      <!-- </ul> -->
    </div>
  </div>
  </div>

>>>>>>> 4f74775fa7ff1ba00b67e754027806fe8ea8b13b
</template>
<script setup lang="ts">

import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
<<<<<<< HEAD

const $router = useRouter()

import { getfloorLeft, getfloorRight } from '@/axios/getData'




=======







const $router = useRouter()



import { getfloorLeft, getfloorRight } from '@/axios/getData'




>>>>>>> 4f74775fa7ff1ba00b67e754027806fe8ea8b13b
const active = ref(0);
const rightBox: any = ref(null)
const value = ref('');
const activeIndex = ref(0);
const left: any = ref([])
const right: any = ref([])


// 获取左侧右侧数据
const init = async () => {
  let arrLeft = await getfloorLeft()
  let arrRight = await getfloorRight()
  left.value = arrLeft
  right.value = arrRight
}


// 跳转详情页


<<<<<<< HEAD

=======
>>>>>>> 4f74775fa7ff1ba00b67e754027806fe8ea8b13b
let tiao = (data: any) => {

  // console.log(data.id);
  const { id, name, num, price, title, img, img1 } = data;
  $router.push({
    path: '/details',
    query: {
      id, name, num, price, title, img, img1
    }
  })
}

// 左侧点击事件
let changeIndex = (index: any) => {
  activeIndex.value = index
  // 获取右侧盒子内容的距离
  let top = rightBox.value.children[index].offsetTop - 50
  // console.log(rightBox.value.children[index]);
  // console.log(top);

  // 右侧盒子滚动到指定位置
  rightBox.value.scrollTo({
    top,
    behavior: 'smooth'
  })
}

// 右侧盒子滚动事件左侧显示对应高亮
let rightScroll = () => {
  // 获取右侧盒子到顶部的距离
  let scrollTop = rightBox.value.scrollTop
  // console.log(scrollTop);
  // 获取右测所有的li
  let liArr = rightBox.value.children
  // 遍历li
  for (let i = 0; i < liArr.length; i++) {
    // 当前li到顶部的距离大于等于右侧盒子到顶部的距离
    if (scrollTop >= liArr[i].offsetTop - 50) {
      // 左侧对应高亮
      activeIndex.value = i
      // console.log(activeIndex.value);
    }
  }
}

let tiaoSearch = () => {
  let data = []

  for (let i = 0; i < right.value.length; i++) {
    data.push(right.value[i])
  }
  // console.log(data);
  $router.push({
    path: '/search',
    query: {
      data: JSON.stringify(data)
    }
  })
}


// 加载完执行
onMounted(() => {
  init()
})
</script>

<<<<<<< HEAD


=======
>>>>>>> 4f74775fa7ff1ba00b67e754027806fe8ea8b13b



<style scoped></style>


<<<<<<< HEAD

=======
>>>>>>> 4f74775fa7ff1ba00b67e754027806fe8ea8b13b
<style scoped>
.active {
  background-color: hotpink;
}

.ipt {
  width: 90%;
  height: 40px;
  border-radius: 20px;
  /* background-color: rgb(238, 238, 238); */
  margin-top: 10px;
}

.ipt[data-v-56651cbb] {
  width: 90%;
  height: 40px;
  border-radius: 20px;
  /* background-color: rgb(238, 238, 238); */
  margin-top: 1px;
}

.content {
  /* background-color: aquamarine; */
  height: calc(100vh - 100px);
  overflow: hidden;
  display: flex;
}

.left {
  flex: 1;
  /* background-color: chartreuse; */
  box-shadow: #ccc 0px 0px 8px 1px;
  overflow-y: auto;
}

.left li {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}

.left li:last-child {
  border-bottom: none;
}

.right {
  flex: 3;
  /* background-color: rgb(49, 253, 253); */
  overflow-y: auto;
}
</style>
